import React from "react";
import {Image, Typography} from "antd";
import {Link, useNavigate} from "react-router-dom";

interface PropsType {
    id: string | number;
    imageSrc: string;
    price: number | string;
    title: string;
}

export const ProductImage: React.FC<PropsType> = ({id, imageSrc, price, title}) => {
    const navigate = useNavigate();
    return (
        <Link to={`detail/${id}`}>
            <div>
                <Image src={imageSrc} height={200} width={200}/>
                <div>
                    <Typography.Text type="secondary">
                        {title.slice(0, 25)}
                    </Typography.Text>
                </div>
                <div>
                    <Typography.Text type="danger" strong>
                        ¥ {price} 起
                    </Typography.Text>
                </div>
            </div>
        </Link>
    );
}
